<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>联系人详情</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css"/>
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <!-- 评分插件 -->
    <link rel="stylesheet" href="/css/materialdesignicons.min.css"/>
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css"/>
    <link rel="stylesheet" href="/css/skin.css"/>
    <!--    <link rel="stylesheet" href="/css/contactManager/contactDetail.css"/>-->
    <link rel="stylesheet" href="/css/customerManager/user/userContactDetail.css"/>
    <script th:inline="javascript">
        var contactData = [[${contact}]];
        console.log(contactData)
    </script>
</head>
<body>
<div class="container-fluid">
    <div class="info-box">
        <div class="hot"><i class="mdi mdi-heart"></i><span th:text="${contact.thermodynamicValue}"></span></div>
        <div class="user-info">
            <div class="head" id="head">
                <a href="!#" data-toggle="modal" data-target="#editHeadModal" id="avatar"><img th:src="@{(${contact.accessUrl})}" alt="头像"><span>修改</span></a>
            </div>
            <h5 id="contactName" th:text="${contact.contactName}"></h5>
            <input type="hidden" id="scoreId" th:value="${contact.contactRating}"/>
            <div class="score"><span id="customerRating" data-number="5"></span></div>
        </div>
        <div class="other-info">
            <input type="text" th:value="${contact.accessUrl}" id="images" hidden>
            <input type="text" th:value="${contact.contactId}" id="contactId" hidden>
            <input type="text" th:value="${contact.customerId}" id="customerId" hidden>
            <div class="list">
                <i class="mdi mdi-domain"></i>
                <span>所属客户</span>
                <p th:text="${customerName}"></p>
            </div>
            <div class="list" th:switch="${contact.contactPosition}">
                <i class="mdi mdi-account-box-outline"></i>
                <span>职务</span>
                <!--                <p th:text="${contact.contactPosition}"></p>-->
                <p th:case="0">公司管理</p>
                <p th:case="1">财务</p>
                <p th:case="2">人力</p>
                <p th:case="3">其他</p>
            </div>
            <div class="list">
                <i class="mdi mdi-map-marker-outline"></i>
                <span>家庭住址</span>
                <p th:text="${contact.homeAddress}"></p>
            </div>
            <div class="list">
                <i class="mdi mdi-map-marker-outline"></i>
                <span>公司地址</span>
                <p th:text="${contact.companyAddress}"></p>
            </div>
            <div class="list">
                <i class="mdi mdi-wechat"></i>
                <span>微信</span>
                <p th:text="${contact.wx}"></p>
            </div>
            <div class="list">
                <i class="mdi mdi-email-outline"></i>
                <span>邮箱</span>
                <p th:text="${contact.mailBox}"></p>
            </div>
            <div class="list">
                <i class="mdi mdi-cellphone"></i>
                <span>主联系电话</span>
                <!--<p id="del" th:text="${contact.contactInformation}"></p>-->
                <p id="del"></p>
                <button type="button" class="tel-button" onclick="callCenter();" th:if="${contact?.contactInformation} ne null"><i class="mdi mdi-phone"></i></button>
            </div>
            <div class="list">
                <i class="mdi mdi-tag-outline"></i>
                <span>标签</span>
                <div>
                    <input type="text" data-role="tagsinput" th:value="${contact.tag}" placeholder="输入标签，回车确认" class="form-control tagsinput">
                </div>
            </div>
        </div>
    </div>
    <div class="card">
        <ul class="nav nav-tabs tabs-lg" role="tablist">
            <li class="active"><a href="#companyInformation" aria-controls="companyInformation" role="tab" data-toggle="tab">订单合同</a></li>
            <li><a href="#contactList" aria-controls="contactList" role="tab" data-toggle="tab" id="contactListc">跟进&商机</a></li>
            <!--<li><a href="#product" aria-controls="product" role="tab" data-toggle="tab">需求反馈</a></li>-->
        </ul>
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane active" id="companyInformation">
                <div class="well form-well">
                    <h3>其他联系方式</h3>
                    <table id="contactDetail"></table>
                </div>
                <div class="well form-well">
                    <h3>日期节点</h3>
                    <table id="festivalNodeDetail"></table>
                </div>
                <div class="well form-well">
                    <h3>订单合同</h3>
                    <!--<div class="action-bar clearfix">
                        <button class="btn btn-label btn-success pull-left" onclick="addCustomerContract()"><label><i class="mdi mdi-plus"></i></label>新增订单合同</button>
                        <div class="min-search pull-right">
                            <input class="form-control" type="text" placeholder="请输入线索池名称" id="contractNumber" name="contractNumber">
                            <button class="btn btn-primary" type="button" id="searchClick"><i class="mdi mdi-magnify"></i><span>搜索</span></button>
                        </div>
                    </div>-->
                    <table id="contractTwo"></table>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane" id="contactList">
                <!--列表内容-->
                <div class="well form-well followRecord">
                    <div class="clearfix">
                        <!--全部 本周 本月-->
                        <div class="time-search pull-left">
                            <input type="hidden" id="dateType" name="dateType"/>
                            <div class="all active-second" onclick="selectTime('all')">全部</div>
                            <div class="week" onclick="selectTime('week')">本周</div>
                            <div class="month" onclick="selectTime('month')">本月</div>
                        </div>
                        <div class="pull-right">
                            <div class="pull-left info">
                                <div class="pull-left">总跟进：<span id="lengths"></span> 次</div>
                                <div class="pull-left">下次跟进时间：<span id="times"></span></div>
                                <label class="lyear-checkbox checkbox-info pull-left">
                                    <input type="checkbox"><span>设置提醒</span>
                                </label>
                            </div>
                            <div class="dropdown pull-left">
                                <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="amax btn btn-default dropdown-toggle">新增跟进<span class="caret"></span></button>
                                <ul class="dropdown-menu dropdown-menu-right">
                                    <li onclick="callCenter()"><a href="JavaScript:void(0);">线上电话</a></li>
                                    <li onclick="goOnline('拜访')"><a href="JavaScript:void(0);">拜访</a></li>
                                    <li onclick="goOnline('微信交流')"><a href="JavaScript:void(0);">微信交流</a></li>
                                    <li onclick="goOnline('线下电话')"><a href="JavaScript:void(0);">线下电话</a></li>
                                    <li onclick="goOnline('电子邮件')"><a href="JavaScript:void(0);">电子邮件</a></li>
                                    <li onclick="goOnline('陪访')"><a href="JavaScript:void(0);">陪访</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <h3>跟进记录</h3>
                    <table id="followRecord"></table>
                </div>
                <div class="well form-well">
                    <h3>相关商机</h3>
                    <table id="opportunityDetail"></table>
                </div>
            </div>
            <!--<div role="tabpanel" class="tab-pane" id="product">
                需求反馈内容3
            </div>-->
        </div>
    </div>
</div>
<!-- 修改头像 -->
<div class="modal fade" id="editHeadModal" tabindex="-1" role="dialog" aria-labelledby="editHeadModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="topEdit">
                <div class="img-box">
                    <img id="newsPic" th:src="@{(${contact.accessUrl})}">
                    <div id="imageId" style="display: none" th:text="${contact.uploadId}"></div>
                </div>
                <label for="files">
                    <span class="btn btn-default btn-label"><label><i class="mdi mdi-upload"></i></label>上传图片</span>
                    <input type="file" id="files" onchange="getNewsPicUpload(this)" class="hide">
                </label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="baseInfo(2)" data-dismiss="modal">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 新增联系方式 -->
<div class="modal fade" tabindex="-1" role="dialog" id="addModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <!-- start -->
                <h4 style="line-height: 40px;font-size: 14px;font-weight: bold;">新增</h4>
                <form class="form-horizontal" autocomplete="off">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">联系类型</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="contactDetailName" type="text" class="form-control"
                                   placeholder="请输入联系类型">
                            <!--<select class="form-control" id="contactDetailName" type="text" title="请选择"
                                    data-live-search="true">
                                <option value="单位电话">单位电话</option>
                                <option value="家庭电话">家庭电话</option>
                                <option value="爱人电话">爱人电话</option>
                                <option value="其他电话">其他电话</option>
                            </select>-->
                        </div>
                        <label class="col-sm-2 control-label">联系方式</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="contactDetailValue" type="text" class="form-control"
                                   placeholder="请输入联系方式">
                        </div>
                    </div>
                </form>
                <div style="width: 100%;display: flex;justify-content: center; margin-top: 30px;">
                    <div class="btn btn-primary" style="margin-right: 20px;" onclick="saveContactDetail()">
                        确定
                    </div>
                    <div class="btn btn-default" onclick="addHide()">取消</div>
                </div>
                <!-- end -->
            </div>
        </div>
    </div>
</div>
<!-- 新增节日节点 -->
<div class="modal fade" tabindex="-1" role="dialog" id="addFestivalNodeModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">新增节日节点</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" autocomplete="off" style="padding: 10px;">
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="festivalNodeName">节日类型</label>
                        <div class="col-xs-7">
                            <input maxlength="20" id="festivalNodeName" type="text" class="form-control" placeholder="请输入节日类型">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="festivalNodeName">日期</label>
                        <div class="col-xs-7">
                            <input id="festivalNodeValue" type="text" class="form-control" placeholder="请输入日期">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="saveFestivalNode()">保存修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 修改节日节点 -->
<div class="modal fade" tabindex="-1" role="dialog" id="editFestivalNodeModel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                <h4 class="modal-title">修改节日节点</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" autocomplete="off" style="padding: 10px;">
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="festivalNodeName">节日类型</label>
                        <div class="col-xs-7">
                            <input maxlength="20" id="festivalNodeNameEdit" type="text" class="form-control"
                                   placeholder="请输入节日类型">
                            <input id="contactDetailIdEdit" type="hidden">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-xs-3 control-label" for="festivalNodeName">日期</label>
                        <div class="col-xs-7">
                            <input id="festivalNodeValueEdit" type="text" class="form-control" placeholder="请输入日期">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="editFestivalNode()">保存修改</button>
            </div>
        </div>
    </div>
</div>
<!-- 新增商机 -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" id="addOpportunityModel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-body" style="min-height: 200px;">
                <!-- start -->
                <h4 style="line-height: 40px;font-size: 14px;font-weight: bold;">新增商机</h4>
                <form class="form-horizontal" autocomplete="off">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商机标题</label>
                        <div class="col-sm-4">
                            <input id="opportunityTitle" type="text" class="form-control" placeholder="请输入商机标题">
                        </div>
                        <label class="col-sm-2 control-label">产品名称</label>
                        <div class="col-sm-4">
                            <input id="productNameAdd" type="text" class="form-control" placeholder="请输入产品名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商机主题</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="opportunityTheme" type="text" class="form-control" placeholder="请输入商机主题">
                        </div>
                        <label class="col-sm-2 control-label">客户联系人</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="customerContact" type="text" class="form-control" placeholder="请输入客户联系人">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">商机联系人</label>
                        <div class="col-sm-4 " style="display: flex;">
                            <input maxlength="20" id="opportunityContact" type="text" class="form-control" placeholder="请输入商机联系人">
                        </div>
                        <label class="col-sm-2 control-label">商机状态</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="opportunityStatusAdd" type="text" title="请选择商机状态" data-live-search="true">
                                <option value="1">初步洽谈</option>
                                <option value="2">需求确定</option>
                                <option value="3">方案报价</option>
                                <option value="4">谈判</option>
                                <option value="5">洽谈合同</option>
                                <option value="6">赢单</option>
                                <option value="7">输单</option>
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">输单友商</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="lostOrderFriend" type="text" class="form-control" placeholder="请输入输单友商">
                        </div>
                        <label class="col-sm-2 control-label">预计签单时间</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="estimatedSigningTimeAdd" type="text" class="form-control" placeholder="请选择预计签单时间">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">最后跟进时间</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="lastFollowUpTime" type="text" class="form-control" placeholder="请选择最后跟进时间">
                        </div>
                        <label class="col-sm-2 control-label">下次跟进时间</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="nextFollowUpTime" type="text" class="form-control" placeholder="请选择下次跟进时间">
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label">预计销售金额</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="estimatedSalesAmount" type="text" class="form-control" placeholder="请输入预计销售金额">
                        </div>
                        <label class="col-sm-2 control-label">签单可能性</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="possibilitySigning" type="text" class="form-control" placeholder="请输入签单可能性">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商机类型</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="opportunityType" type="text" class="form-control" placeholder="请输入商机类型">
                        </div>
                        <label class="col-sm-2 control-label">商机获取日期</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="opportunityAcquisitionTime" type="text" class="form-control" placeholder="请选择商机获取日期">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">商机来源</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="opportunitySource" type="text" class="form-control" placeholder="请输入商机来源">
                        </div>
                        <label class="col-sm-2 control-label">备注</label>
                        <div class="col-sm-4">
                            <input maxlength="20" id="remarks" type="text" class="form-control" placeholder="请输入备注">
                        </div>
                    </div>

                </form>
                <div style="width: 100%;display: flex;justify-content: center; margin-top: 30px;">
                    <div class="btn btn-primary" style="margin-right: 20px;" onclick="saveOpportunity()">确定</div>
                    <div class="btn btn-default" onclick="addOpportunityHide()">取消</div>
                </div>
                <!-- end -->
            </div>
        </div>
    </div>


</div>
</body>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<!--标签插件-->
<script src="/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/js/crm/common/city.js"></script>
<!--日期选择插件-->
<script src="/js/crm/common/common.js"></script>
<!-- 评分插件 -->
<script type="text/javascript" src="/js/crm/common/raty.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!--消息提醒-->
<script type="text/javascript" src="/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="/js/crm/common/lightyear.js"></script>
<!-- 图表 -->
<script type="text/javascript" src="/js/echarts.min.js"></script>
<!--标签插件-->
<script type="text/javascript" src="/js/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<script src="/js/crm/contactManager/contactDetail.js"></script>
</html>